<template>
  <div :class="[`dance-music-mv-list`, `dance-music-mv-list-${theme}`]">
    <h4 class="mv-list-title">
      全部MV
    </h4>
    <mv-bar @change="barChange"></mv-bar>
    <mv-list :mv-list="mvList"></mv-list>
    <div class="mv-list-page">
      <el-pagination
        :current-page.sync="offset"
        background
        :total="2000"
        :page-size="40"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import mvBar from './mv-bar.vue'
import { theme } from '../../../mixin/global/theme'
import { _getAllMv } from '../../../network/mv'
import mvList from './mv-list.vue'
export default {
  mixins: [theme],
  components: { mvBar, mvList },
  data () {
    return {
      currentAreas: '全部',
      currentType: '全部',
      currentOrder: '上升最快',
      limit: 40,
      offset: 1,
      mvList: [], //所有mv数据
      total: 0 //总数据条数
    }
  },
  created () {
    this.getAllmv()
  },
  methods: {
    // 子传父  分类数据
    barChange (area, type, order) {
      this.currentAreas = area
      this.currentType = type
      this.currentOrder = order
      this.getAllmv()
    },
    pageChange (val) {
      // this.offset = val
      this.getAllmv()
    },
    // 获取所有mv
    async getAllmv () {
      var res = await _getAllMv({
        area: this.currentAreas,
        type: this.currentType,
        order: this.currentOrder,
        limit: this.limit,
        offset: (this.offset - 1) * this.limit
      })
      console.log(res)
      this.mvList = res.data.data
    }
  }
}
</script>

<style lang="less">
.mv-list-page {
  width: 100%;
  margin: 20px 0;
}
</style>
